<template>
  <div>
    <div class="tags" @wheel.prevent="handleScroll">
      <ul ref="myTags">
        <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"
            @click.middle="handleMiddle"
            @contextmenu.prevent="openMenu(item,$event)">
          <router-link ref="tag" :to="item.path" class="tags-li-title">
            {{item.title}}
          </router-link>
          <span class="tags-li-icon" @click="closeMyTags(item.path)"><i class="el-icon-close"
                                                                        style=" transform:scale(0.7);"></i></span>
        </li>
      </ul>
    </div>
    <div v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextMenu">
      <li @click="closeSelected(selectedTag)">关闭</li>
      <li @click="closeOther(selectedTag)">关闭其他</li>
      <li @click="closeAll">关闭全部</li>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'

  export default {
    data() {
      return {
        path: '',
        visible: false,
        top: 0,
        left: 0,
        selectedTag: {}
      }
    },
    computed: {
      ...mapState({
        tagsList: state => state.tagInfo.tagsList
      })
    },
    methods: {
      ...mapMutations('tagInfo', ['setTags', 'closeTags', 'closeAllTags', 'closeOtherTags']),
      handleMiddle() {
        return false
      },
      isActive(path) {
        return path === this.$route.fullPath
      },
      // 关闭单个标签
      closeMyTags(path) {
        this.path = path
        this.closeTags(this)
      },
      // 设置标签
      setMyTags(route) {
        this.setTags(route)
      },
      handleScroll(e) {
        let scrollWrapper = this.$refs.myTags
        const eventDelta = e.wheelDelta || -e.deltaY * 40
        scrollWrapper.scrollLeft = scrollWrapper.scrollLeft + eventDelta / 4
      },
      closeSelected(tag) {
        this.path = tag.path
        this.closeTags(this)
      },
      closeOther(tag) {
        this.path = tag.path
        this.closeOtherTags(this)
      },
      closeAll() {
        this.closeAllTags(this)
      },
      openMenu(tag, e) {
        const menuMinWidth = 105
        const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
        const offsetWidth = this.$el.offsetWidth // container width
        const maxLeft = offsetWidth - menuMinWidth // left boundary
        const left = e.clientX - offsetLeft + 15 // 15: margin right

        if (left > maxLeft) {
          this.left = maxLeft
        } else {
          this.left = left
        }

        this.top = e.clientY
        this.visible = true
        this.selectedTag = tag
      },
      closeMenu() {
        this.visible = false
      }
    },
    watch: {
      $route(newValue) {
        this.setMyTags(newValue)
      },
      visible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      }
    },
    created() {
      this.setMyTags(this.$route)
    }
  }

</script>

<style type="text/scss" lang="scss" scoped>
  @import "../../assets/common.scss";

  .contextMenu {
    margin: 0;
    background: #fff;
    z-index: 9999;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }

  .tags {
    position: relative;
    height: 36px;
    width: 100%;
    background: #fff;
    padding-right: 20px;
    box-shadow: 0 2px 2px 0 #e6e6e6;
    overflow: hidden;
  }

  .tags ul {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    white-space: nowrap;
    overflow-x: auto;
  }

  .tags-li {
    position: relative;
    display: inline-block;
    margin: 4px 0 0 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 14px;
    overflow: hidden;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #000;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
    &:first-child {
      margin-left: 19px;
    }
  }

  .tags-li:not(.active):hover {
    background: #f8f8f8;
  }

  .tags-li.active {
    color: #fff;
    background-color: #4977FC;
  }

  .tags-li-title {
    float: left;
    max-width: calc(100% - 10px);
    margin-right: 5px;
    color: #666;
  }

  .tags-li-icon {
    cursor: pointer;
  }

  .tags-li.active .tags-li-title {
    color: #fff;
  }

  .tags-close-box {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-top: 1px;
    text-align: center;
    width: 110px;
    height: 30px;
    background: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
    z-index: 10;
  }

</style>
